<template>
    <div>
        <el-dialog :title="isAdd ? '添加商品分类' : '修改商品分类'" :visible.sync="zhe" :before-close="close">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">

                <el-form-item label="上级分类" prop="pid">
                    <el-select placeholder="请选择上级分类" v-model="form.pid">

                        <el-option label="顶级分类" :value="0"></el-option>
                        <el-option v-for="item in $store.getters['cate/getCate']" :key="item.id" :label=item.catename
                            :value=item.id></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分类名称" prop="catename">
                    <el-input v-model="form.catename"></el-input>
                </el-form-item>


                <el-form-item label="图片" pr v-if="form.pid!=0">
                    <el-upload action="#" list-type="picture-card" 
                        :file-list="photo" 
                        :auto-upload="false" 
                        :on-preview="onPreview"
                        :on-change="changeInfo"
                        :limit="1"
                        >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>


                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { cateadd, cateinfo, cateedit } from "../../request/api"
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                pid: 0,//上级分类编号
                catename: "",//分类名称
                status: 1,
                img: "" //图片文件

            },
            options: [
                {
                    value: 1,
                    label: "系统管理",
                },
                {
                    value: 2,
                    label: "商城管理",
                },
            ],
            rules: {
                catename: [
                    { required: true, message: "请输入分类名称", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                pid: [{ required: true, message: "请选择上级分类", trigger: "change" }],
            },
            dialogImageUrl: '',
            dialogVisible: false,
            photo: []
        }
    },
    props: ["zhe", "isAdd"],
    methods: {
        changeInfo(file,filelist){
       this.form.img = file.raw
        },
 //图片预览
 onPreview(file){
    //   console.log(file,'文件的内容')
      //打开预览弹框
      this.dialogVisible = true 
      // 给弹框赋值图片地址
      this.dialogImageUrl = file.url
    },
        // 提交
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    if (this.isAdd) {

                        // console.log(this.form);

                        cateadd(this.form).then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                // console.log(res, '添加接口')
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                })
                            }
                            this.$store.dispatch("cate/getCateListAction")

                        })
                    } else {
                        // console.log(this.form);

                        cateedit(this.form).then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                // console.log(res, '添加接口')
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                })
                            }
                        })
                    }
                    //关闭弹窗
                    this.close()
                    //重置表格内容
                    this.reset()
                    // 重新从仓库调用请求数据列表
                    this.$store.dispatch("cate/getCateListAction")

                }
            })
        },
        //数据回显
        lookup(id) {
            cateinfo({ id }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    this.form = res.list
                    this.form.id = id
                    this.photo = [{url:res.list.img}]
                }
            })

        },
        close() {
            this.$emit("close")
            this.reset()

        },
        // 表单清空事件
        reset() {
            // 清空表单数据
            this.form = {
                pid: 0,//上级分类编号
                catename: "",//分类名称
                status: 1,

            },
                //清空正则验证
                this.$refs.form.resetFields()
                //清空图片
                this.photo = []


        }



    },
    mounted() {

    },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>
